
const merge = require("webpack-merge") // 引用合并函数，合并配置
const path = require('path') // 取绝对路径的 path 模块
const common = require('./webpack.common') // 引用webpack.config.js 公共代码

const CopyWebpackPlugin = require("copy-webpack-plugin") // 拷贝静态文件

const MiniCssExtractPlugin = require('mini-css-extract-plugin') // 把css文件单独抽取出来 css按需加载
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin') // 压缩css代码
const TerserJSPlugin = require('terser-webpack-plugin') // 压缩js代码

module.exports = merge.merge(common, {
  mode: "production", // 生产环境模式
  devtool: "none", // 工具
  output: {
    filename: "[name]-[contenthash:8].bundle.js"
  },
  optimization: { // 优化项
    minimizer: [
      new TerserJSPlugin(), // 压缩js
      new OptimizeCssAssetsPlugin() // 压缩css
    ],
    usedExports: true, // 除去未引用代码
    minimize: true, // 压缩代码
    concatenateModules: true,
    splitChunks: {
      chunks: "all" //提取公共文件
    }
  },
  plugins: [
    // 抽取css 文件, 并通过[name]占位符命名，还有长度. 
    // file: '[name].[contenthash].bundle.css' // 根据输出内容生成的哈希值，不同文件就有不同的hash 值

    new MiniCssExtractPlugin({
      filename: '[name]-[contenthash:8].main.css', // 文件名main.css
    }),

    new CopyWebpackPlugin([ // 拷贝静态文件
      {
        from: path.join(__dirname, './public/favicon.ico'), // 定义要拷贝的源文件  
        to: path.join(__dirname, './dist/static') // 定义要拷贝到的目标文件夹 
      },
      {
        from: path.join(__dirname, './src/asset'),
        to: path.join(__dirname, './dist/static')
      }
    ])
  ]
})